<template>
  <div class="system-management-index">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1>系统管理</h1>
      <p>管理系统用户、权限配置、系统监控和性能优化</p>
    </div>

    <!-- 管理模块网格 -->
    <div class="management-grid">
      <div class="management-card" @click="navigateToUserManagement">
        <div class="card-icon user-icon">
          <i class="el-icon-user"></i>
        </div>
        <div class="card-content">
          <h3>用户管理</h3>
          <p>管理系统用户账号、权限和状态</p>
          <div class="card-stats">
            <span class="stat-item">
              <i class="el-icon-user"></i>
              {{ totalUsers }} 用户
            </span>
            <span class="stat-item">
              <i class="el-icon-check"></i>
              {{ activeUsers }} 活跃
            </span>
          </div>
        </div>
      </div>

      <div class="management-card" @click="navigateToPermissionConfig">
        <div class="card-icon permission-icon">
          <i class="el-icon-key"></i>
        </div>
        <div class="card-content">
          <h3>权限配置</h3>
          <p>管理角色权限和访问控制</p>
          <div class="card-stats">
            <span class="stat-item">
              <i class="el-icon-s-custom"></i>
              {{ totalRoles }} 角色
            </span>
            <span class="stat-item">
              <i class="el-icon-key"></i>
              {{ totalPermissions }} 权限
            </span>
          </div>
        </div>
      </div>

      <div class="management-card" @click="navigateToSystemMonitoring">
        <div class="card-icon monitor-icon">
          <i class="el-icon-monitor"></i>
        </div>
        <div class="card-content">
          <h3>系统监控</h3>
          <p>实时监控系统状态和性能指标</p>
          <div class="card-stats">
            <span class="stat-item">
              <i class="el-icon-cpu"></i>
              CPU {{ cpuUsage }}%
            </span>
            <span class="stat-item">
              <i class="el-icon-folder"></i>
              内存 {{ memoryUsage }}%
            </span>
          </div>
        </div>
      </div>

      <div class="management-card" @click="navigateToPerformanceOptimization">
        <div class="card-icon performance-icon">
          <i class="el-icon-cpu"></i>
        </div>
        <div class="card-content">
          <h3>性能优化</h3>
          <p>系统性能分析和优化建议</p>
          <div class="card-stats">
            <span class="stat-item">
              <i class="el-icon-data-line"></i>
              优化项 {{ optimizationItems }}
            </span>
            <span class="stat-item">
              <i class="el-icon-warning"></i>
              告警 {{ warningCount }}
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- 系统概览 -->
    <div class="system-overview">
      <div class="overview-left">
        <el-card class="system-info">
          <template #header>
            <div class="card-header">
              <span>系统信息</span>
              <el-button type="text" @click="refreshSystemInfo">
                <i class="el-icon-refresh"></i>
                刷新
              </el-button>
            </div>
          </template>
          <div class="info-grid">
            <div class="info-item">
              <div class="info-label">系统版本</div>
              <div class="info-value">{{ systemInfo.version }}</div>
            </div>
            <div class="info-item">
              <div class="info-label">启动时间</div>
              <div class="info-value">{{ systemInfo.startTime }}</div>
            </div>
            <div class="info-item">
              <div class="info-label">运行时间</div>
              <div class="info-value">{{ systemInfo.uptime }}</div>
            </div>
            <div class="info-item">
              <div class="info-label">数据库状态</div>
              <div class="info-value status-normal">{{ systemInfo.dbStatus }}</div>
            </div>
            <div class="info-item">
              <div class="info-label">缓存状态</div>
              <div class="info-value status-normal">{{ systemInfo.cacheStatus }}</div>
            </div>
            <div class="info-item">
              <div class="info-label">消息队列</div>
              <div class="info-value status-normal">{{ systemInfo.mqStatus }}</div>
            </div>
          </div>
        </el-card>
      </div>

      <div class="overview-right">
        <el-card class="recent-activities">
          <template #header>
            <div class="card-header">
              <span>最近活动</span>
              <el-button type="text" @click="viewAllActivities">
                查看全部
              </el-button>
            </div>
          </template>
          <div class="activities-list">
            <div class="activity-item" v-for="activity in recentActivities" :key="activity.id">
              <div class="activity-icon">
                <i :class="activity.icon"></i>
              </div>
              <div class="activity-content">
                <div class="activity-title">{{ activity.title }}</div>
                <div class="activity-time">{{ activity.time }}</div>
              </div>
              <div class="activity-status" :class="activity.status">
                {{ activity.statusText }}
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

export default {
  name: 'SystemManagementIndex',
  setup() {
    const router = useRouter()

    // 统计数据
    const totalUsers = ref(1248)
    const activeUsers = ref(956)
    const totalRoles = ref(12)
    const totalPermissions = ref(56)
    const cpuUsage = ref(45)
    const memoryUsage = ref(62)
    const optimizationItems = ref(8)
    const warningCount = ref(3)

    // 系统信息
    const systemInfo = ref({
      version: 'v1.0.0',
      startTime: '2025-01-01 09:00:00',
      uptime: '15天 6小时 30分钟',
      dbStatus: '正常',
      cacheStatus: '正常',
      mqStatus: '正常'
    })

    // 最近活动
    const recentActivities = ref([
      {
        id: 1,
        title: '用户管理员创建了新用户',
        time: '10分钟前',
        icon: 'el-icon-user',
        status: 'success',
        statusText: '成功'
      },
      {
        id: 2,
        title: '权限配置已更新',
        time: '30分钟前',
        icon: 'el-icon-key',
        status: 'success',
        statusText: '成功'
      },
      {
        id: 3,
        title: '系统监控发现异常',
        time: '1小时前',
        icon: 'el-icon-warning',
        status: 'warning',
        statusText: '警告'
      },
      {
        id: 4,
        title: '性能优化任务完成',
        time: '2小时前',
        icon: 'el-icon-cpu',
        status: 'success',
        statusText: '完成'
      },
      {
        id: 5,
        title: '数据库备份完成',
        time: '6小时前',
        icon: 'el-icon-folder',
        status: 'success',
        statusText: '完成'
      }
    ])

    // 导航方法
    const navigateToUserManagement = () => {
      router.push('/admin/system/users')
    }

    const navigateToPermissionConfig = () => {
      router.push('/admin/system/permissions')
    }

    const navigateToSystemMonitoring = () => {
      router.push('/admin/system/monitoring')
    }

    const navigateToPerformanceOptimization = () => {
      router.push('/admin/system/performance')
    }

    // 刷新系统信息
    const refreshSystemInfo = () => {
      ElMessage.success('系统信息已刷新')
      // 模拟刷新数据
      cpuUsage.value = Math.floor(Math.random() * 100)
      memoryUsage.value = Math.floor(Math.random() * 100)
    }

    // 查看所有活动
    const viewAllActivities = () => {
      router.push('/admin/system/activities')
    }

    onMounted(() => {
      // 页面加载时获取最新数据
      refreshSystemInfo()
    })

    return {
      totalUsers,
      activeUsers,
      totalRoles,
      totalPermissions,
      cpuUsage,
      memoryUsage,
      optimizationItems,
      warningCount,
      systemInfo,
      recentActivities,
      navigateToUserManagement,
      navigateToPermissionConfig,
      navigateToSystemMonitoring,
      navigateToPerformanceOptimization,
      refreshSystemInfo,
      viewAllActivities
    }
  }
}
</script>

<style scoped>
.system-management-index {
  padding: 20px;
}

.page-header {
  margin-bottom: 30px;
}

.page-header h1 {
  font-size: 32px;
  color: #333;
  margin-bottom: 10px;
}

.page-header p {
  font-size: 16px;
  color: #666;
}

.management-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.management-card {
  background: #fff;
  border-radius: 12px;
  padding: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #e6e6e6;
  display: flex;
  align-items: flex-start;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.management-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  border-color: #409eff;
}

.card-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  font-size: 24px;
  color: #fff;
  flex-shrink: 0;
}

.user-icon {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.permission-icon {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.monitor-icon {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.performance-icon {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.card-content {
  flex: 1;
}

.card-content h3 {
  font-size: 18px;
  color: #333;
  margin-bottom: 8px;
}

.card-content p {
  font-size: 14px;
  color: #666;
  margin-bottom: 15px;
  line-height: 1.4;
}

.card-stats {
  display: flex;
  gap: 20px;
}

.stat-item {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #999;
}

.stat-item i {
  margin-right: 5px;
  font-size: 14px;
}

.system-overview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.overview-left,
.overview-right {
  display: flex;
  flex-direction: column;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.system-info {
  height: 100%;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-label {
  font-size: 12px;
  color: #999;
}

.info-value {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.info-value.status-normal {
  color: #67c23a;
}

.recent-activities {
  height: 100%;
}

.activities-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.activity-item {
  display: flex;
  align-items: center;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
  transition: background-color 0.2s;
}

.activity-item:hover {
  background: #e9ecef;
}

.activity-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #409eff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  font-size: 16px;
}

.activity-content {
  flex: 1;
}

.activity-title {
  font-size: 14px;
  color: #333;
  margin-bottom: 4px;
}

.activity-time {
  font-size: 12px;
  color: #999;
}

.activity-status {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 500;
}

.activity-status.success {
  background: #f0f9ff;
  color: #67c23a;
}

.activity-status.warning {
  background: #fef0e6;
  color: #e6a23c;
}

.activity-status.error {
  background: #fef0f0;
  color: #f56c6c;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .management-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
  
  .system-overview {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .management-grid {
    grid-template-columns: 1fr;
  }
  
  .info-grid {
    grid-template-columns: 1fr;
  }
  
  .card-stats {
    flex-direction: column;
    gap: 8px;
  }
}
</style> 